<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">

  <!-- 新 Bootstrap5 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

  <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
  <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

  <title>文章详情</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  ul{
    padding: 0;
  }
  li{
    list-style: none;
  }
  .wrapper{
    width: 1000px;
    margin: 0 auto;
  }
  .comment{
    background: bisque;
    margin-top:100px ;
  }
  .article{
    padding-top: 50px;
  }
  .comment p{
    font-size: 20px;
    color: coral;
  }
  .content p{
    font-size:15px;
    color: black;
  }
  .comment .comment-content{
    padding: 10px 0;
    width: 668px;
    height: 100px;
    border-bottom: 1px solid #ede;
  }
  .article h3{
    padding-bottom: 25px;
  }
</style>
<body>
<div th:replace="~{common :: navbar}"></div>
<div class="article wrapper">
  <h3 th:text="${article.title}"></h3>
  <p th:text="${article.content}"></p>
</div>
<div class="comment">
  <div class="wrapper">
    <div class="comment-content" th:each="comment:${commentList}">
      <p th:text="${comment.author}"></p>
      <span th:text="${comment.content}"></span>
    </div>
  </div>
</div>

<div class="container mt-3 wrapper">
  <form th:action="@{'/comment/add/'+${article.id}}" method="post">
    <div class="mb-3 mt-3">
      <label for="author" class="form-label">请输入昵称</label>
      <input type="text" class="form-control" id="author" placeholder="请输入昵称" name="author">
    </div>
    <div class="mb-3 mt-3">
      <label for="content">请输入评论:</label>
      <textarea class="form-control" rows="5" id="content" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>